<template>
  <div style="background-color: white;padding: 20px">
    <div class="table-operator">
      <a-button @click="addDeposit(1)" v-has="'customer:addDeposit'" type="primary" icon="plus">新增线上合同</a-button>
      <a-button @click="addDeposit(2)" v-has="'customer:addDeposit'" type="primary" icon="plus">新增线下合同</a-button>
    </div>

    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        offset="30"
        finished-text="没有更多了"
        @load="downLoadData"
        :immediate-check="false">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item 
            :title="item.name" 
            :name="i"
            v-for="(item,i) in dataSource"
            :key="i">
            <div class="list">
              <div>客户姓名：{{ item.name }}</div>
              <div>项目地址：{{ item.address }}</div>
              <div>定金金额：{{item.money}}</div>
              <div>签定时间：{{item.decidesTime}}</div>
              <div>是否签字：{{signList[item.isSign]}}</div>
              <div>付款状态：{{payList[item.payStatus]}}</div>
              <div>合同类型：{{item.onlineOrOffline==1?'线上合同':'线下合同'}}</div>
              <div v-if="item.payVoucher">付款凭证：<span @click="downloadFile(item)" style="color:blue;">预览</span></div>
              <div>经办人：{{item.createBy}}</div>
              <div>操作：
                <a-popconfirm v-if="item.isSign === 0 && item.onlineOrOffline === 1" title="确定给当前客户发送电子合同吗？" v-has="'customer:sign'" @confirm="() => handleSign(item)">
                  <a>发起签署</a>
                </a-popconfirm>
                <a-divider type="vertical" v-if="item.isSign === 0 && item.onlineOrOffline === 1" v-has="'customer:sign'"/>
                  <a @click="uploadRemitScrip(item)" v-has="'customer:uploadRemitScrip'" v-if="(item.isSign === 2 || item.onlineOrOffline === 2) && (item.payVoucher == null || item.payVoucher === '')">上传付款凭证</a>
                <a-divider type="vertical" v-if="(item.isSign === 2 || item.onlineOrOffline === 2) && (item.payVoucher == null || item.payVoucher === '')"/>
                <a-popconfirm title="确定删除吗?" v-if="item.isSign === 0" v-has="'customer:depositDelete'" @confirm="()=>deleteItem(item,i)">
                  <a>删除</a>
                </a-popconfirm>
              </div>
            </div>
           
          </van-collapse-item>
        </van-collapse>
      </van-list>
    </div>
    <add-deposit-pay-modal ref="addDepositPayModal" @ok="modalOk"></add-deposit-pay-modal>
    <depositPaySign ref="depositPaySign" @ok="modalFormOk"></depositPaySign>
    <upload-remit-scrip-modal ref="uploadRemitScripModal" @ok="modalOk"></upload-remit-scrip-modal>
  </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import addDepositPayModal from "./modules/addDepositPayModal";
import depositPaySign from './modules/depositPaySign'
import { getAction, postAction } from "../../../../../api/manage";
import uploadRemitScripModal from "./modules/uploadRemitScripModal";
import { ImagePreview } from 'vant';
export default {
  name: 'GhDepositPayList',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
    addDepositPayModal,
    depositPaySign,
    uploadRemitScripModal
  },
  props: {
    customerId: {
      required: true,
      default: 0
    },
  },
  data () {
    return {
      finished: false,
      dataSource: [],
      activeName: '',
      customerInfo: {
        customerId: '',
        name: '',
        phone: '',
        address: ''
      },
      description: '意向购买管理页面',
      signList:['未签字','签署中','签署完成'],
      payList:['待付款','已付款'],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'客户姓名',
          align:"center",
          dataIndex: 'name'
        },
        {
          title:'项目地址',
          align:"center",
          dataIndex: 'address'
        },
        {
          title:'定金金额',
          align:"center",
          dataIndex: 'money'
        },
        {
          title:'签定时间',
          align:"center",
          dataIndex: 'decidesTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        {
          title:'是否签字',
          align:"center",
          dataIndex: 'isSign',
          customRender:function (text,record) {
            if (record.onlineOrOffline == 1){
              if(text === 0){
                return <a-tag color="red">未签字</a-tag>
              } else if (text === 1){
                return <a-tag color="orange">签署中</a-tag>
              } else if (text === 2){
                return <a-tag color="green">签署完成</a-tag>
              }
            }
          }
        },
        {
          title:'付款状态',
          align:"center",
          dataIndex: 'payStatus',
          customRender:function (text) {
            if (text === 0) {
              return <a-tag color="orange">待付款</a-tag>
            } else if (text === 1) {
              return <a-tag color="green">已付款</a-tag>
            } else {
              return <a-tag>text</a-tag>
            }
          }
        },
        {
          title:'合同类型',
          align:"center",
          dataIndex: 'onlineOrOffline',
          customRender:function (text) {
            if (text == 1){
              return "线上合同"
            }else {
              return "线下合同"
            }
          }
        },
        {
          title:'付款凭证',
          align:"center",
          dataIndex: 'payVoucher',
          slots: { title: 'customTitle' },
          scopedSlots: { customRender: 'payVoucher' },
        },
        {
          title:'经办人',
          align:"center",
          dataIndex: 'createBy'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/ghDepositPay/list",
        delete: "/ghDepositPay/delete",
        deleteBatch: "/ghDepositPay/deleteBatch",
        exportXlsUrl: "/ghDepositPay/exportXls",
        importExcelUrl: "ghDepositPay/importExcel",

        intentionBuy: "ghDepositPay/intentionBuy",
      },
      loading: false,
      dictOptions:{},
      superFieldList:[],
    }
  },
  created() {
    // this.loadData();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    deleteItem(item){
      this.ipagination.current = 1
      this.dataSource = []
      this.handleDelete(item.id)
    },
    downLoadData(){
      this.ipagination.current++;
      this.finished = false
      this.loadData()
    },
    uploadRemitScrip(record){
      if (record.onlineOrOffline === 1){
        if (record.isSign !== 2){
          this.$message.warning("当前合同未签字，暂不能上传凭证")
          return
        }
      }
      this.$refs.uploadRemitScripModal.title = "上传付款凭证"
      this.$refs.uploadRemitScripModal.edit(record)
    },
    modalOk(){
      this.loadData();
    },
    //新增合同签署记录
    addDeposit(value) {
      this.$refs.addDepositPayModal.onLineOrOffLine = value
      this.$refs.addDepositPayModal.model = {};
      this.$refs.addDepositPayModal.add(this.customerId);
      this.$refs.addDepositPayModal.title = "新增";
    },
    //进行签署
    handleSign(obj) {
      this.loading = true;
      let params = {};
      params.id = obj.id;
      params.customerId = obj.customerId;
      params.cardNo = obj.cardNo;
      params.phone = obj.phone;
      params.name = obj.name;
      params.decidesTime = obj.decidesTime;
      params.money = obj.money;
      params.contractType = obj.contractType;
      params.periodOfValidityBegin = obj.periodOfValidityBegin;
      params.periodOfValidityEnd = obj.periodOfValidityEnd;
      postAction(this.url.intentionBuy,params).then((res)=>{
        if(res.success){
          this.$message.success(res.message);
          this.loadData();
        } else {
          this.$message.warning(res.message);
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      if (arg == 1) {
        this.dataSource = []
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams();
      let that = this;
      this.loading = true;
      params.customerId = this.customerId;
      params.contractType = 1;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          let list = res.result.records || res.result;
          this.dataSource = [...this.dataSource, ...list]
          if (this.dataSource.forEach(function (item) {
            if (item.isSign === 2){
              that.$router.push({ path: "/infoTab", query: {id: item.customerId, name: item.name, key: "3"}});
            }
          }))
          if (res.result.total) {
            this.ipagination.total = res.result.total;
          } else {
            this.ipagination.total = 0;
          }
          this.loading = false
          if(res.result.records.length<10){
            this.finished = true;
          }
        } else {
          this.finished = true;
          this.$message.warning(res.message)
        }
        console.log(this.dataSource)
        
      }).finally(() => {
        this.loading = false
      })
    },
    downloadFile(record){
      
      ImagePreview([record.payVoucher]);
      //window.open(record.payVoucher)
      //window.location = record.payVoucher+'?response-content-type=application/octet-stream';
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.list{
  line-height: 40px;
  border-top: 1px solid #f6f6f6;
  font-size: 12px;
}
</style>